<div class="layui-fluid">
    <style>
        .imges{
            display: flex;
            align-items: center;
        }
        .layui-form-item .layui-input-inline{
            width: 300px;
        }
        .layui-form-label{
            width: 100px;
        }
        label i{
            color: #f86102;
        }
        .layui-colla-content{
            background-color: #fff;
        }

        /*
  * 基于复选框和单选框的卡片风格多选组件
  * 需要具备一些基础的 CSS 技能，以下样式均为外部自主实现。
  */
        /* 主体 */
        .layui-form-checkbox>.lay-skin-checkcard,
        .layui-form-radio>.lay-skin-checkcard {
            display: table;
            display: flex;
            padding: 12px;
            white-space: normal;
            border-radius: 10px;
            border: 1px solid #e5e5e5;
            color: #000;
            background-color: #fff;
        }
        .layui-form-checkbox>.lay-skin-checkcard>*,
        .layui-form-radio>.lay-skin-checkcard>* {
            /* display: table-cell; */  /* IE */
            vertical-align: top;
        }
        /* 悬停 */
        .layui-form-checkbox:hover>.lay-skin-checkcard,
        .layui-form-radio:hover>.lay-skin-checkcard {
            border-color: #16b777;
        }
        /* 选中 */
        .layui-form-checked>.lay-skin-checkcard,
        .layui-form-radioed[lay-skin="none"]>.lay-skin-checkcard {
            color: #000;
            border-color: #16b777;
            background-color: rgb(22 183 119 / 10%) !important;
            /* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
        }
        /* 禁用 */
        .layui-checkbox-disabled>.lay-skin-checkcard,
        .layui-radio-disabled>.lay-skin-checkcard {
            box-shadow: none;
            border-color: #e5e5e5 !important;
            background-color: #eee !important;
        }
        /* card 布局 */
        .lay-skin-checkcard-avatar {
            padding-right: 8px;
        }
        .lay-skin-checkcard-detail {
            overflow: hidden;
            width: 100%;
        }
        .lay-skin-checkcard-header {
            font-weight: 500;
            font-size: 16px;
            white-space: nowrap;
            margin-bottom: 4px;
        }
        .lay-skin-checkcard-description {
            font-size: 13px;
            color: #5f5f5f;
        }
        .layui-disabled  .lay-skin-checkcard-description{
            color: #c2c2c2! important;
        }
        /* 选中 dot */
        .layui-form-checked>.lay-check-dot:after,
        .layui-form-radioed>.lay-check-dot:after {
            position: absolute;
            content: "";
            top: 2px;
            right: 2px;
            width: 0;
            height: 0;
            display: inline-block;
            vertical-align: middle;
            border-width: 10px;
            border-style: dashed;
            border-color: transparent;
            border-top-left-radius: 0px;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 0px;
            border-bottom-left-radius: 6px;
            border-top-color: #16b777;
            border-top-style: solid;
            border-right-color: #16b777;
            border-right-style: solid;
            overflow: hidden;
        }
        .layui-checkbox-disabled>.lay-check-dot:after,
        .layui-radio-disabled>.lay-check-dot:after {
            border-top-color: #d2d2d2;
            border-right-color: #d2d2d2;
        }
        /* 选中 dot-2 */
        .layui-form-checked>.lay-check-dot-2:before,
        .layui-form-radioed>.lay-check-dot-2:before {
            position: absolute;
            font-family: "layui-icon";
            content: "\e605";
            color: #fff;
            bottom: 4px;
            right: 3px;
            font-size: 9px;
            z-index: 12;
        }
        .layui-form-checked>.lay-check-dot-2:after,
        .layui-form-radioed>.lay-check-dot-2:after {
            position: absolute;
            content: "";
            bottom: 2px;
            right: 2px;
            width: 0;
            height: 0;
            display: inline-block;
            vertical-align: middle;
            border-width: 10px;
            border-style: dashed;
            border-color: transparent;
            border-top-left-radius: 6px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 6px;
            border-bottom-left-radius: 0px;
            border-right-color: #16b777;
            border-right-style: solid;
            border-bottom-color: #16b777;
            border-bottom-style: solid;
            overflow: hidden;
        }
        .layui-checkbox-disabled>.lay-check-dot-2:before,
        .layui-radio-disabled>.lay-check-dot-2:before {
            color: #eee !important;
        }
        .layui-checkbox-disabled>.lay-check-dot-2:after,
        .layui-radio-disabled>.lay-check-dot-2:after {
            border-bottom-color: #d2d2d2;
            border-right-color: #d2d2d2;
        }
        .lay-ellipsis-multi-line {
            overflow: hidden;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }

        .layui-form-radio>.lay-skin-tag,
        .layui-form-checkbox>.lay-skin-tag {
            font-size: 13px;
            border-radius: 100px;
        }
        .layui-form-checked>.lay-skin-tag,
        .layui-form-radioed>.lay-skin-tag {
            color: #fff !important;
            background-color: #16b777 !important;
        }
        <!-- 单选框 Color Picker -->
        /* 主体 */
         .layui-form-radio>.lay-skin-color-picker {
             border-radius: 50%;
             border-width: 1px;
             border-style: solid;
             width: 20px;
             height: 20px;
         }
        /* 选中 */
        .layui-form-radioed>.lay-skin-color-picker {
            box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px currentColor;
        }
    </style>
    <div class="layui-form" action="" lay-filter="system-setting">
        <div class="layui-collapse" lay-accordion>
            <div class="layui-colla-item">
                <div class="layui-colla-title">系统设置</div>
                <div class="layui-colla-content layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">系统名称</label>
                        <div class="layui-input-inline layui-input-wrap">
                            <input type="text" name="title" lay-verify="required" placeholder="系统名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item imges" tip="本地静态资源(/images/*)或网络资源(http://*)">
                        <label class="layui-form-label">系统LOGO<i class="layui-icon layui-icon-question-circle-fill"></i></label>
                        <div class="layui-input-inline layui-input-wrap">
                            <input type="text" name="logoUrl" placeholder="LOGO" autocomplete="off" class="layui-input">
                        </div>
                        <div class="jmAvatar xxl " onclick="clickImgView(this)" id="system_logo">
                            <img rel="icon" th:if="${system_config.logoUrl != ''}" th:src="${system_config.logoUrl}"/>
                        </div>
                    </div>
                    <div class="layui-form-item imges" tip="本地静态资源(/images/*)或网络资源(http://*)">
                        <label class="layui-form-label">网站图标<i class="layui-icon layui-icon-question-circle-fill"></i></label>
                        <div class="layui-input-inline layui-input-wrap">
                            <input type="text" name="icoUrl"  placeholder="网站图标" autocomplete="off" class="layui-input">
                        </div>
                        <div class="jmAvatar xxl " onclick="clickImgView(this)" id="system_icon" >
                            <img  th:if="${system_config.icoUrl == ''}" th:src="@{/images/logo.png}"/>
                            <img  th:if="${system_config.icoUrl != ''}" th:src="${system_config.icoUrl}"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请求加密</label>
                        <div class="layui-input-block">
                            <input type="radio" name="encryptEnable" value="true" title="开启" >
                            <input type="radio" name="encryptEnable" value="false" title="关闭">
                        </div>
                    </div>

                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">登录设置</div>
                <div class="layui-colla-content">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号限制</label>
                        <input type="radio" name="online" value="1" lay-skin="none">
                        <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="">
                            <div class="lay-skin-checkcard-avatar">
                                <span class="layui-icon layui-icon-user" style="font-size: 30px"></span>
                            </div>
                            <div class="lay-skin-checkcard-detail">
                                <div class="lay-skin-checkcard-header">单人在线</div>
                                <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
                                    同一时间、同一个账号只有一个用户可以使用。
                                </div>
                            </div>
                        </div>
                        <input type="radio" name="online" value="2" lay-skin="none" checked>
                        <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="">
                            <div class="lay-skin-checkcard-avatar">
                                <i class="layui-icon layui-icon-addteam" style="font-size: 30px"></i>
                            </div>
                            <div class="lay-skin-checkcard-detail">
                                <div class="lay-skin-checkcard-header">多人在线</div>
                                <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
                                    同一时间、同一个账号有多个用户可以使用。
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户端限制</label>
                        <input type="radio" name="client" value="1" lay-skin="none">
                        <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="">
                            <div class="lay-skin-checkcard-avatar">
                                <span class="layui-icon layui-icon-gold" style="font-size: 30px"></span>
                            </div>
                            <div class="lay-skin-checkcard-detail">
                                <div class="lay-skin-checkcard-header">多端共存</div>
                                <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
                                    账号不限制时，可以登录多个同类型客户端。
                                </div>
                            </div>
                        </div>
                        <input type="radio" name="client" value="2" lay-skin="none" checked>
                        <div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="">
                            <div class="lay-skin-checkcard-avatar">
                                <i class="layui-icon layui-icon-desktop" style="font-size: 30px"></i>
                            </div>
                            <div class="lay-skin-checkcard-detail">
                                <div class="lay-skin-checkcard-header">同端互斥</div>
                                <div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
                                    在同一类型的客户端登录时，会注销其它客户端上的账号。
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">密码设置</div>
                <div class="layui-colla-content">

                </div>
            </div>
            <div class="layui-colla-item">
                <div class="layui-colla-title">消息设置</div>
                <div class="layui-colla-content">

                </div>
            </div>
            <div class="layui-panel">
                <div class="layui-form-item" style="margin: 10px 0;">
                    <div class="layui-input-block" style="display: flex;align-items: center;justify-content: center;">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="saveSetting">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    {{#
        top.tools.loadscripts(["/js/page/setting/system_setting.js"], function () {
            templateViewInit();
        })
    }}
</script>